import { useEffect, useState } from 'react'

const Demo3 = () => {
  const [count, setCount] = useState(0)
  // 挂载生命周期
  // useEffect(() => {
  //   console.log('mounted')
  // }, [])

  // 挂载和更新生命周期
  // useEffect(() => {
  //   console.log('mounted、count-updated')
  // }, [count])

  // 挂载、和卸载
  useEffect(() => {
    console.log('mounted')
    return () => {
      // 组件卸载，清除定时器、解绑事件,取消订阅等...
      console.log('unmounted')
    }
  }, [])

  return (
    <>
      <h3>Demo3</h3>
      <p>count: {count}</p>
      <button
        onClick={() => {
          setCount(() => {
            return count + 1
          })
        }}
      >
        +
      </button>
    </>
  )
}

export default Demo3
